<template>
  <div class="phone-verifi">
    <el-form
      :model="state.formParam"
      :rules="state.rules"
      ref="ruleForm"
      class="demo-ruleForm"
    >
      <el-form-item prop="old_user_password" class="mb-20">
        <el-input
          v-model="state.formParam.old_user_password"
          show-password
          :placeholder="$t('formTip.loginPassTip')"
        ></el-input>
      </el-form-item>
      <el-form-item prop="user_password" class="mb-20">
        <el-input
          v-model="state.formParam.user_password"
          show-password
          :placeholder="$t('formTip.newLoginPassTip')"
        ></el-input>
      </el-form-item>
      <el-form-item prop="user_confirm_password" class="mb-20">
        <el-input
          v-model="state.formParam.user_confirm_password"
          show-password
          :placeholder="$t('formTip.newLoginPassComfirm')"
        ></el-input>
      </el-form-item>
      <div class="btn radius login-btn text-16 share-color" @click="submitForm">
        {{ $t("formTip.comfirm") }}
      </div>
    </el-form>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { updateUserPassword } from "@/api/user";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

export default {
  name: "phoneFond",
  props: {
    param: Object
  },
  setup(props) {
    const { t } = useI18n();
    const state = reactive({
      rules: {
        old_user_password: [
          {
            required: true,
            message: "*" + t("formTip.oldPassTip"),
            trigger: "blur"
          }
        ],
        user_password: [
          {
            required: true,
            message: "*" + t("formTip.newLoginPassTip"),
            trigger: "blur"
          }
        ],
        user_confirm_password: [{ validator: validatePass, trigger: "blur" }]
      },
      formParam: props.param
    });
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("*" + t("formTip.newLoginPassComfirm")));
      } else {
        if (props.param.user_password !== value) {
          callback(new Error("*" + t("formTip.passDifTip")));
        } else {
          callback();
        }
      }
    };

    /**
     * methods
     */
    const $store = useStore();
    const $router = useRouter();
    const ruleForm = ref();
    const submitForm = () => {
      ruleForm.value.validate(valid => {
        if (valid) {
          console.log(state.formParam);
          updata(state.formParam);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    const updata = param => {
      param.new_password=param.user_password
      param.old_password=param.old_user_password
      param.secondary_password=param.user_confirm_password
      updateUserPassword(param).then(res => {
        if (res.code === 1) {
          $store.dispatch("user/logout").then(() => {
            $router.replace(`/login`);
          });
        }else{
          ElMessage.error(res.msg);
        }
      });
    };
    return {
      submitForm,
      state,
      validatePass,
      ruleForm,
      updata
    };
  }
};
</script>

<style scoped lang="less">
.phone-verifi {
  width: 100%;
  padding: 0 10px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-50 {
  margin-bottom: 50px;
}
.btn {
  height: 46px;
  line-height: 46px;
}
</style>
